<style lang="postcss" scoped>
    .home-container {
    }
</style>
<template>
    <section class="home-container">
        <MasterPage title="设备管理">
            <div slot="title-icon">
                <Icon type="ios-game-controller-b"/>
            </div>
            <div slot="search">
            </div>
            <div slot="btns">
                <Button type="primary" icon="md-add" @click="modalShow = !modalShow">添加</Button>
            </div>
            <div slot="paddingContent">
                <zk-table
                        ref="table"
                        sum-text="sum"
                        index-text="#"
                        :data="this.devices"
                        :columns="columns"
                        :stripe="props.stripe"
                        :border="props.border"
                        :show-header="props.showHeader"
                        :show-summary="props.showSummary"
                        :show-row-hover="props.showRowHover"
                        :show-index="props.showIndex"
                        :tree-type="props.treeType"
                        :is-fold="props.isFold"
                        :expand-type="props.expandType"
                        :selection-type="props.selectionType">
                    <template slot="$expand" scope="scope">
                        {{ `My name is ${scope.row.name},
                        this rowIndex is ${scope.rowIndex}.`
                        }}
                    </template>
                    <template slot="likes" scope="scope">
                        {{ scope.row.likes.join(',') }}
                    </template>
                    <template slot="index" scope="scope">
                        1
                    </template>
                    <template slot="createtime" scope="scope">
                        {{ scope.row.createtime | formatDate}}
                    </template>
                    <template slot="opt" scope="scope">
                        <Icon title="edit" size="16" type="ios-create-outline" style='cursor: pointer'
                              @click="editRowData(scope.row,scope.rowIndex)"/>
                        &nbsp;
                        <Icon title="del" size="18" type="ios-trash-outline" style='cursor: pointer'
                              @click="delRowData(scope.row,scope.rowIndex)"/>
                    </template>
                </zk-table>
            </div>
            <div slot="pager">
            </div>
        </MasterPage>

        <Modal
                v-model="modalShow"
                title="aaa"
                :mask-closable="false"
                width="600px">
            <Card>
                <Form ref="deviceInfo" :model="deviceInfo" :rules="ruleValidate" :label-width="80">
                    <Row>
                        <Col span="11">
                            <FormItem label="上级设备" prop="parentid">
                                <treeselect
                                        :options="this.devices"
                                        :normalizer="normalizer"
                                        v-model="deviceInfo.parentid"
                                        :multiple="false"/>
                            </FormItem>
                        </Col>
                        <Col span="2" style="text-align: center">&nbsp;</Col>
                        <Col span="11">
                            <FormItem label="设备类型" prop="devicetypecode">
                                <Select type="text" v-model="deviceInfo.devicetypecode"
                                       placeholder="Enter your devicename">
                                    <Option v-for="item in deviceType" :value="item.typecode" :key="item.typecode">{{ item.typename }}</Option>
                                </Select >
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="11">
                            <FormItem label="设备名称" prop="devicename">
                                <Input v-model="deviceInfo.devicename" placeholder="Enter your devicename"></Input>
                            </FormItem>
                        </Col>
                        <Col span="2" style="text-align: center">&nbsp;</Col>
                        <Col span="11">
                            <FormItem label="设备编码" prop="devicecode">
                                <Input type="text" v-model="deviceInfo.devicecode" placeholder="Enter your devicename">
                                </Input>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="11">
                            <FormItem label="设备地址" prop="ip">
                                <Input v-model="deviceInfo.ip" placeholder="Enter your ip"></Input>
                            </FormItem>
                        </Col>
                        <Col span="2" style="text-align: center">&nbsp;</Col>
                        <Col span="11">
                            <FormItem label="设备端口" prop="port">
                                <Input type="text" v-model="deviceInfo.port" placeholder="Enter your port">
                                </Input>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </Card>
            <div slot="footer">
                <Button size="large" type="text" @click="handleReset('deviceInfo')">取消</Button>
                <Button size="large" type="primary" @click="handleSubmit('deviceInfo')">确定</Button>
            </div>
        </Modal>
    </section>
</template>
<script>
    import MasterPage from '@/components/Master'
    import {DeviceInfo} from '../assets/js/class';
    import {addDevice, delOneDevice, getAllDeviceType} from '../assets/js/service.business';
    import {mapActions, mapGetters} from "vuex";

    // import the component
    import Treeselect from '@riophae/vue-treeselect'
    // import the styles
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'

    export default {
        components: {
            MasterPage,Treeselect
        },
        data() {
            return {
                ruleValidate: {
                    parentid: [
                        {required: true, message: 'The name cannot be empty', trigger: 'blur'}
                    ],
                    devicetypecode: [
                        {required: true, message: 'The name cannot be empty', trigger: 'blur'}
                    ],
                    devicename: [
                        {required: true, message: 'The name cannot be empty', trigger: 'blur'}
                    ],
                    devicecode: [
                        {required: true, message: 'The name cannot be empty', trigger: 'blur'}
                    ]
                },
                modalShow: false,
                props: {
                    stripe: false,
                    border: false,
                    showHeader: true,
                    showSummary: false,
                    showRowHover: true,
                    showIndex: false,
                    treeType: true,
                    isFold: false,
                    expandType: false,
                    selectionType: false,
                },
                columns: [
                    {
                        label: '设备名称',
                        prop: 'devicename',
                        width: '400px',
                    },
                    {
                        label: '设备类型',
                        prop: 'typename',
                        width: '150px',
                        headerAlign: 'center',
                        align: 'center',
                    },
                    {
                        label: '设备编码',
                        prop: 'devicecode',
                        width: '200px',
                        headerAlign: 'center',
                        align: 'center',
                    },
                    {
                        label: 'Ip地址',
                        prop: 'ip',
                        width: '200px',
                        headerAlign: 'center',
                        align: 'center',
                    },
                    {
                        label: '端口',
                        prop: 'port',
                        width: '100px',
                        headerAlign: 'center',
                        align: 'center',
                    },
                    {
                        label: '状态',
                        prop: 'status',
                        width: '80px',
                        headerAlign: 'center',
                        align: 'center',
                    },
                    {
                        label: '创建时间',
                        template: 'createtime',
                        type: 'template',
                        width: '200px',
                        headerAlign: 'center',
                        align: 'center',
                    },
                    {
                        label: '创建人',
                        prop: 'creater',
                        width: '100px',
                        headerAlign: 'center',
                        align: 'center',
                    },
                    {
                        label: '操作',
                        prop: 'opt',
                        minWidth: '150px',
                        type: 'template',
                        headerAlign: 'center',
                        align: 'center',
                        template: 'opt',
                    }
                ],
                deviceInfo: new DeviceInfo(),
                deviceType: []
            }
        },
        computed: {
            ...mapGetters({
                devices: 'devices',
                menuList: 'menuList',
                deviceTreeSelect: 'deviceTreeSelect'
            })
        },
        methods: {
            ...mapActions({
                getAllDeviceTree: 'asyncGetAllDeviceTree'
            }),
            editRowData(row, index) {
                this.deviceInfo = row;
                this.modalShow = true;
            },
            delRowData(row, index) {
                delOneDevice(row.devicecode).then((res) => {
                    if (0 == res.code) {
                        this.$Message.success(res.message);
                        this.getAllDeviceTree();
                    } else
                        this.$Message.warning(res.message);
                }).catch((res) => {
                    this.$Message.error(res.message);
                });
            },
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        addDevice(this.deviceInfo).then((res) => {
                                if (0 == res.code) {
                                    this.$Message.success(res.message);
                                    this.getAllDeviceTree();
                                    this.modalShow = false;
                                } else
                                    this.$Message.warning(res.message);
                            }
                        ).catch((res) => {
                            this.$Message.error(res.message);
                        });
                    }
                })
            },
            handleReset(name) {
                this.$refs[name].resetFields();
                this.modalShow = false;
            },
            normalizer(node) {
                //去掉children=[]的children属性
                if (node.children && !node.children.length) {
                    delete node.children;
                }
                return {
                    id: node.id,
                    label: node.label,
                    children: node.children
                }
            }
        },
        created() {
            getAllDeviceType().then((res) => {
                this.deviceType = res.data;
            });
        }
    }
</script>
